@extends('admin.layout.app')

@section('title', '權限管理')

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                权限列表
            </div>
            <div class="layui-card-body">

                <form class="layui-form toolbar" id="search-form" action="" onsubmit="return false;">
                    <div class="tool-bar layui-form-item">
                        <div class="layui-inline">
                            <input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="输入搜索的关键字">
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button class="layui-btn" data-type="reload" title="搜索">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                                <a class="layui-btn" href="@broute('permission.create')" title="添加">
                                    <i class="layui-icon layui-icon-add-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </form>

                <table class="layui-table" lay-data="{ url:'@broute('permission.index')', page:true, limit:30, id:'table'}" lay-filter="tb">
                    <thead>
                    <tr>
                        <th lay-data="{type:'checkbox'}"></th>
                        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                        <th lay-data="{field:'name'}">权限</th>
                        <th lay-data="{field:'created_at'}">生成时间</th>
                        <th lay-data="{field:'updated_at'}">更新时间</th>
                        <th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#editbar'}">操作</th>
                    </tr>
                    </thead>
                </table>

                <div class="layui-btn-group toolbar">
                    <a class="layui-btn layui-btn-danger " data-type="delete">
                        <i class="layui-icon layui-icon-delete"></i>
                        批量删除
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="editbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit" href="@broute('permission.edit', ['@{{d.id}}'])" title="编辑">
            <i class="layui-icon layui-icon-edit"></i>
        </a>
    </script>
@endsection

@section('script')
<script>
layui.use('table', function () {
    var table = layui.table;

    var $ = layui.$, active = {
        reload: function() {
            table.reload('table', {
                page: { curr: 1 }
                , limit: 30
                , where: $('#search-form').serializeJSON()
            });
        },
        delete: function () { //获取选中数据
            var checkStatus = table.checkStatus('table')
                , data = checkStatus.data;
            // 抽取所有roleId
            var id = [];
            $.map(data, function (k, v) {
                id.push(k.id)
            });
            $.ajax({
                url: '@broute('permission.delete')',
                type: 'post',
                data: {'id': id},
                success: function (data) {
                    if (!data.status) {
                        layer.msg(data.message, function(){});
                        return false;
                    }
                    layer.msg(data.message);
                    active['reload'].call(this);
                }
            });
        }
    };

    $('.toolbar .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
</script>
@endsection
